<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/core.css"/>
		<script type="text/javascript" src="vendor/jquery-1.11.0.js" ></script>		
	</head>

	<body>
		<header class="jw-header">
			<nav class="jw-header-nav">
				<div class="jw-hide-nav">
					<div class="jw-hide-nav-middle">
						<img width="40px" height="40px" src="img/XL.png" />
					</div>

				</div>
				<ul class="jh-nav-list">
					<li class="jh-nav-logo">

					</li>
					<li>
						<a href="index1.html">WHAT WE DO</a>
					</li>
					<li>
						<a href="index2.html">OUR WORK</a>
					</li>
					<li>
						<a href="index3.html">CLIENTS</a>
					</li>
					<li>
						<a href="index4.html">TEAM</a>
					</li>
					<li>
						<a href="index5.html">OFFICES</a>
					</li>
					<li>
						<a href="index6.html">EXPERIMANTES</a>
					</li>

				</ul>
			</nav>
		</header>
			<div class="i4-content">
				<div class="i4-column">
					<div class="i4-column-p1" id="i4-containe-img1">
						<h2><a href="#">Nana Qurishy</a></h2>
						<p>
							<a href="#">User Experience Expert</a>
						</p>
					</div>
					<div class="i4-column-p2" id="i4-containe-img4">
						<h2><a href="#">Steven Smith</a></h2>
						<p><a href="#">Founder & Creative Director</a></p>
					</div>
					<div class="i4-column-p3" id="i4-containe-img5">
						<h2><a href="#">Mariam Clark</a></h2>
						<p><a href="#">Co-Founder</a></p>
					</div>
					<div class="i4-column-p4" id="i4-containe-img7">
						<h2><a href="#">Sara Clark</a></h2>
						<p><a href="#">Creative Head - Designs</a></p>
					</div>
				</div>
			    <div class="i4-containe-img1" id="i4-containe-img1">
					<img src="img/i4-5.png" />
				</div>
				<div class="i4-containe-img2" id="i4-containe-img2">
					<img src="img/i4-10.png" />
				</div>
				<div class="i4-containe-img3" id="i4-containe-img3">
					<img src="img/i4-11.png" />
				</div>
				<div class="i4-containe-img4" id="i4-containe-img4">
					<img src="img/i4-6.png" />
				</div>
				<div class="i4-containe-img5" id="i4-containe-img5">
					<img src="img/i4-7.png" />
				</div>
				<div class="i4-containe-img6" id="i4-containe-img6">
					<img src="img/i4-12.png"/>
				</div>
				<div class="i4-containe-img7" id="i4-containe-img7">
					<img src="img/i4-8.png"/>
				</div>
				<div class="i4-containe-img8" id="i4-containe-img8">
					<img src="img/i4-13.png"/>
				</div>
			</div>
		<div class="foorter">
			<div class="copyright">
				Copyright © 2013 VISUAL Box. All Right Reserved
			</div>
			<div class="copyright2">
				<img src="img/02-01_07.png"/>
			</div>
		</div>
		<div class="nav-right">
			<div><img src="img/DH.png"/></div>
			<div><img src="img/YJ2.png"/></div>
			<div><img src="img/freng.png"/></div>
			<div><img src="img/come.png"/></div>
		</div>
	</body>
	<script>
		function display(){
			document.getElementById("i4-containe-img2").style.display = "block";
			document.getElementById("i4-containe-img3").style.display = "none";
			document.getElementById("i4-containe-img6").style.display = "none";
			document.getElementById("i4-containe-img8").style.display = "none";
		}
		document.getElementById("i4-containe-img1").onclick=function(){
			display()
		}
		function display1(){
			document.getElementById("i4-containe-img3").style.display = "block";
			document.getElementById("i4-containe-img2").style.display = "none";
			document.getElementById("i4-containe-img6").style.display = "none";
			document.getElementById("i4-containe-img8").style.display = "none";
		}
		document.getElementById("i4-containe-img4").onclick=function(){
			display1()
		}
		function display2(){
			document.getElementById("i4-containe-img6").style.display = "block";
			document.getElementById("i4-containe-img2").style.display = "none";
			document.getElementById("i4-containe-img8").style.display = "none";
			document.getElementById("i4-containe-img3").style.display = "none";
		}
		document.getElementById("i4-containe-img5").onclick=function(){
			display2()
		}
		function display3(){
			document.getElementById("i4-containe-img8").style.display = "block";
			document.getElementById("i4-containe-img3").style.display = "none";
			document.getElementById("i4-containe-img2").style.display = "none";
			document.getElementById("i4-containe-img6").style.display = "none";
		}
		document.getElementById("i4-containe-img7").onclick=function(){
			display3()
		}
	</script>

</html>
